<template>
	<view>
		<u-sticky offset-top="0">
			<view class="search">
				<u-search
					style="background-color: rgba(0, 0, 0, 0.02);"
					:inputStyle="{marginLeft: '12rpx'}"
					shape="square"
					searchIconColor="#C6C6C6"
					placeholderColor="#C6C6C6"
					color="#7F7F7F"
					placeholder="请输入机构名称查询" 
					v-model="keyword"
					@search="handleSearch"
					@clear="handleSearch"
					@custom="handleSearch"
				 ></u-search>
			</view>
		</u-sticky>
		<DaTreeVue2
			:data="roomTreeData"
			ref="DaTreeRef"
			labelField="title"
			valueField="key"
			
			:defaultExpandedKeys="defaultExpandedKeys"
			:onlyRadioLeaf="false"
			:showRadioIcon="false"
			@change="handleTreeChange"
			@expand="handleExpandChange"
		/>
		<view class="select" @click.stop="onClickSelectedPerson" v-if="selectedPersonNum">
			<u-badge type="error" max="99" :value="selectedPersonNum" absolute :offset="[-4,-2]"></u-badge>
			已选
		</view>
		<view style="height: 100rpx;"></view>
		<view class="btn">
			<u-button class="button" text="确定" type="primary" @click="onConfirm"></u-button>
		</view>
	</view>
</template>
<script>
	import DaTreeVue2 from '@/components/da-tree-vue/index.vue'
	import http from '@/utils/request'
	export default {
	  name: 'selectReceiver',
		components: {
			DaTreeVue2
		},
		data() {
		    return {
					keyword: '', // 输入的关键字
		      // key的类型必须对应树数据key的类型
		      defaultExpandedKeys: [], // 默认展开第一列
		      roomTreeData: [],
					
		    }
		  },
			onLoad() {
				this.getTreeList() // 获取树列表
			},
			computed: {
				// 监听数据
				selectedPersonNum () {
					if (this.$store.state.selectPerson && this.$store.state.selectPerson.length) {
						return this.$store.state.selectPerson.length
					} else {
						return 0
					}
				}
			},
		  methods: {
				// 获取全部真实树列表
				getTreeList () {
					http.get('/api/erpmng/sys/sysDepart/queryTreeAndCountList').then(res =>{
						if (res.success) {
							if (res.result && res.result.length) {
								this.defaultExpandedKeys = [res.result[0].key]
							}
							this.roomTreeData = res.result
						}
					})
				},
				
				// 获取关键词搜索的树列表
				commonRequestThen () {
					http.get('/api/erpmng/sys/sysDepart/searchRealDepart',{keyWord: this.keyword}).then(res =>{
						if (res.success) {
							this.roomTreeData = res.result
						}
					})
				},
				handleSearch () {
					if (this.keyword) {
						this.commonRequestThen()
					} else {
						this.getTreeList()
					}
				},
		    handleTreeChange(allSelectedKeys, currentItem) {
					const gek = this.$refs.DaTreeRef?.getCheckedKeys()
					if (!gek) {
						return false
					}
					uni.navigateTo({
						url:`/pages/docManage/selectPersonnel?orgCode=${currentItem.originItem.orgCode}&isMulti=true&type=receiver`
					})
		    },
		    handleExpandChange(expand, currentItem) {
		      console.log('handleExpandChange ==>', expand, currentItem)
		    },
				onClickSelectedPerson () {
					uni.navigateTo({
						url:'/pages/docManage/selectedPersonnel'
					})
				},
				// 点击确定
				onConfirm () {
					uni.navigateBack()
				}
		  },
	}
</script>
<style scoped lang="scss">
// page{
// 	background-color: #ffffff;
// }
.search {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		padding: 10rpx 40rpx;
		box-sizing: border-box;
		.drop-down {
			margin-left: 20rpx;
			background: #FFFFFF;
			height: 60rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			
			.screen_left {
				line-height: 60rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7F7F7F;
				margin-right: 8rpx;
			}
			
			.screen_right {
				display: flex;
				align-items: center;
			
				.right-icon{
					transition: transform 0.5s;
					-moz-transition: -moz-transform 0.5s; /* Firefox 4 */
					-webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */
					-o-transition: -o-transform 0.5s;
					transform: rotate(180deg);
					-webkit-transform: rotate(0deg);
					-moz-transform: rotate(0deg);
					-o-transform: rotate(0deg);
				}
				.right-icon-transform{
					transition: transform 0.5s;
					-moz-transition: -moz-transform 0.5s; /* Firefox 4 */
					-webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */
					-o-transition: -o-transform 0.5s;
					transform: rotate(180deg);
					-webkit-transform: rotate(180deg);
					-moz-transform: rotate(180deg);
					-o-transform: rotate(180deg);
				}
			}
			
		}
	}
	.select {
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		font-size: 14px;
		border-radius: 50%;
		background-color: #ccc;
		line-height: 80rpx;
		text-align: center;
	}
	// 按钮
	.btn{
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		padding-top: 10rpx;
		.button{
			width: 95%;
		}
	}
</style>